<template>
    <div>
       <div class="container">
            <div class="basic-information">基本信息</div>
            <div class="mobile-phone">
               <span class="mobile-phone-span">您的手机号</span>
               <input type="text" class="mobile-phone-input" placeholder="请输入手机号" v-model="phone" ref="inputs" v-focus>
            </div>
            <div class="name-box">
               <span class="name-box-span">您的姓名</span>
               <input type="text" class="name-box-input" placeholder="请输入姓名" v-model="name" ref="names">
            </div>
            <div class="enterprise-information">企业信息</div>
            <div class="name-ein">
               <span class="name-ein-span">统一社会信息代码</span>
               <input type="text" class="name-ein-input" placeholder="请输入税号" v-model="einName" ref="eins">
            </div>
            <!-- 下一步按钮 -->
            <div class="next-step-btn" @click="openFullScreen()">下一步</div>
            <div class="toast" v-show="toastShow">
                {{toastText}}
            </div>
       </div>
    </div>
</template>

<script>
import $                                    from 'jquery'
import { Indicator,Toast,MessageBox }       from 'mint-ui'
import ApiConfig                            from '../config/api.config'
import Navigator                            from '../assets/js/utils/navigator.util.js'
import Rules                                from '../assets/js/utils/regular.util'

export default {
    name: 'User',
    data(){
        return{
            phone:'',//电话号
            name:'',//姓名
            einName:'',//企业名称/税号 
            fullscreenLoading: false,//加载
            flag:true,//标志
            toastShow: false,
            toastText: ''
        }
    },
    mounted(){
        if (Navigator.test()=='isAndroid') {
            $('.basic-information,.enterprise-information').css({
                'box-shadow': 'inset 0 -0.5px 0 0 #DEDEDE',
                '-webkit-box-shadow':'inset 0 -0.5px 0 0 #DEDEDE'
            })
            $('.mobile-phone,.name-box,.name-ein').css({
                'box-shadow': 'inset 0 -0.5px 0 0 #DEDEDE',
                '-webkit-box-shadow':'inset 0 -0.5px 0 0 #DEDEDE'
            })
        }
        if (Navigator.test()=='isIOS') {
            $('.basic-information,.enterprise-information').css({
                'box-shadow': 'inset 0 -1.5px 0 0 #DEDEDE',
                '-webkit-box-shadow':'inset 0 -1.5px 0 0 #DEDEDE'
            })
            $('.mobile-phone,.name-box,.name-ein').css({
                'box-shadow': 'inset 0 -1.5px 0 0 #DEDEDE',
                '-webkit-box-shadow':'inset 0 -1.5px 0 0 #DEDEDE'
            })
        }
        
        //手机号失去焦点
        $(".mobile-phone-input").blur(()=>{
            if(this.phone != ''){//手机号不为空
                if(!Rules.isPhone (this.phone)){
                    if (Navigator.test()=='isAndroid') {
                        // Toast({
                        //     message: '请输入正确的手机号！',
                        // });
                        this.toast('请输入正确的手机号！')
                    }
                    if (Navigator.test()=='isIOS') {
                        // Toast({
                        //     message: '请输入正确的手机号！',
                        //     className:'prompt',
                        //     position: 'top',
                        // });
                        this.toast('请输入正确的手机号！')
                    }
                    this.phone=''
                    this.flag=false
                    this.$nextTick((x)=>{   //手机号输入框聚焦
                        this.$refs.inputs.focus();
                    })
                    return;
                }else{
                    this.flag=true
                    this.$nextTick((x)=>{   //手机号输入框聚焦
                        this.$refs.names.focus();
                    })
                } 
            }else{//手机号为空
                if (Navigator.test()=='isAndroid') {
                    // Toast({
                    //     message: '手机号不能为空！',
                    // });
                    this.toast('手机号不能为空！')
                }
                if (Navigator.test()=='isIOS') {
                    // Toast({
                    //     message: '手机号不能为空！',
                    //     className:'prompt',
                    //     position: 'top',
                    // });
                    this.toast('手机号不能为空！')
                }
                this.name=''
                this.$nextTick((x)=>{   //输入框聚焦
                    this.$refs.inputs.focus();
                })
                return;
            }
        });
        //姓名失去焦点
        $(".name-box-input").blur(()=>{ 
            if(this.name == ''){//姓名为空
                if (Navigator.test()=='isAndroid') {
                    // Toast({
                    //     message: '姓名不能为空！',
                    // });
                    this.toast('姓名不能为空！')
                }
                if (Navigator.test()=='isIOS') {
                    // Toast({
                    //     message: '姓名不能为空！',
                    //     className:'prompt',
                    //     position: 'top',
                    // });
                    this.toast('姓名不能为空！')
                }
                this.name=''
                this.$nextTick((x)=>{   //输入框聚焦
                    this.$refs.names.focus();
                })
                return;
            }else{//姓名不为空
                this.$nextTick((x)=>{   //输入框聚焦
                    this.$refs.eins.focus();
                })
            }
        });
        //税号失去焦点
        $(".name-ein-input").blur(()=>{
            if(this.einName == ''){//税号为空
                if (Navigator.test()=='isAndroid') {
                    // Toast({
                    //     message: '统一社会信息代码!',
                    // });
                    this.toast('统一社会信息代码不能为空！')
                }
                if (Navigator.test()=='isIOS') {
                    // Toast({
                    //     message: '统一社会信息代码!',
                    //     className:'prompt',
                    //     position: 'top',
                    // });
                    this.toast('统一社会信息代码不能为空！')
                }
                this.$nextTick((x)=>{   //输入框聚焦
                    this.$refs.eins.focus();
                })
                return;
            }else{
                document.documentElement.scrollTop=0;
                document.body.scrollTop=0; 
            }
        });
    },
    methods:{
        //toast提示框
        toast (str) {
            let v = this
            v.toastText = str
            v.toastShow = true
            setTimeout(function(){
                v.toastShow = false
            }, 1500)
        },
        //下一步
        openFullScreen(){
            if(this.phone != '' && this.name != '' && this.einName != ''){
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                this.BEGAN_REGISTERED = `${ApiConfig.BEGAN_REGISTERED}`;
                this.$fetch(this.BEGAN_REGISTERED,'post',{
                    phone: this.phone,   
                    name: this.name,
                    taxId :this.einName
                })
                .then((res) => {
                    // console.log(res.ret_message)
                    var that=this;
                    if(res.ret_message=='成功'){
                        //查询是否含有贷前报告
                        that.CREDIT_REPORT = `${ApiConfig.CREDIT_REPORT}`;
                        that.$axios.get(that.CREDIT_REPORT+that.einName)
                        .then((res) => {
                            loading.close();
                            // console.log(res.data.data)
                            if(res.data.data =='SUCCESS'){
                                window.location.href="https://smewx.webank.com/mesp-wpm/rls/#/loginCredit/entry?channel=100_wb0007"
                            }
                            if(res.data.data =='PENDING'){
                                that.$router.push({  
                                    path: '/waiting',   
                                    query: {   
                                        phone: that.phone,   
                                        name: that.name,
                                        einName :that.einName
                                    }  
                                })
                            }
                        })
                        .catch(err => {
                            // Toast({
                            //     message: '请求失败，请退出重试！',
                            // });
                            this.toast('请求失败，请退出重试！')
                        })  
                    }else{
                        loading.close();
                        this.toast(res.ret_message)
                        this.$nextTick((x)=>{   //输入框聚焦
                            this.$refs.inputs.focus();
                        })
                    }
                })
                .catch(err => {
                    loading.close();
                    //清空输入框
                    // this.phone=''
                    // this.name=''
                    // this.einName=''
                    if (Navigator.test()=='isAndroid') {
                        // Toast({
                        //     message: '请求失败，请重试！',
                        // });
                        this.toast('请求失败，请重试！')
                    }
                    if (Navigator.test()=='isIOS') {
                        // Toast({
                        //     message: '请求失败，请重试！',
                        //     className:'prompt',
                        //     position: 'top',
                        // });
                        this.toast('请求失败，请重试！')
                    }
                    this.$nextTick((x)=>{   //输入框聚焦
                        this.$refs.inputs.focus();
                    })
                    document.documentElement.scrollTop=0;
                    document.body.scrollTop=0;
                })  
            }
        },
    }
}
</script>

<style lang="less" scoped>

.container{
    width: 100%;
    .basic-information,.enterprise-information{
        width: 100%;
        height: 54px;
        line-height: 54px;
        float: left;
        font-family: PingFangSC-Medium;
        color:#333;
        font-size: 16px;
        letter-spacing: -0.34px;
        background-color: #F2F2F2;
        padding-left: 20px;
        box-sizing: border-box; 
        font-weight: 550;
    }
    .mobile-phone,.name-box,.name-ein{
        width: 100%;
        height: 54px;
        line-height: 54px;
        float: left;
        padding:0 20px;
        box-sizing: border-box;
        background-color: #fff;
        display: block;
        -webkit-appearance: none !important;
        // box-shadow: inset 0 -1.5px 0 0 #DEDEDE;
        // -webkit-box-shadow:inset 0 -1.5px 0 0 #DEDEDE;
        .mobile-phone-span,.name-box-span,.name-ein-span{
            display: inline-block;
            float: left;
            height: 54px;
            line-height: 54px;
            font-family: PingFangSC-Medium;
            color:#333;
            font-size: 14px;
            letter-spacing: -0.39px;
            font-weight:400;
            // background-color: green;
        } 
        .mobile-phone-input,.name-box-input,.name-ein-input{
            display: inline-block;
            float: right;
            max-width: 200px;
            height: 22px;
            line-height: 22px;
            margin-top: 16px;
            font-family: PingFangSC-Regular;
            color:#333;
            font-size: 16px;
            letter-spacing: -0.39px;
            border: none;
            outline: none;
            text-align: right;
            // background-color: red;
        } 
        .mobile-phone-input::-webkit-input-placeholder,
        .name-box-input::-webkit-input-placeholder,
        .name-ein-input::-webkit-input-placeholder{
            font-family: PingFangSC-Regular;
            color:#DEDEDE;
            font-size: 15px;
            letter-spacing: -0.39px;
            text-align: right;
        }
    }
    .next-step-btn{
        position: absolute;
        bottom:0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: #2529E8;
        float: left;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        color:#fff;
        font-family: PingFangSC-Regular;
        letter-spacing: -0.38px;
    }
    .toast {
        position: fixed;
        z-index: 2000;
        left: 50%;
        top:45%;
        transition:all .5s;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        text-align: center;
        border-radius: 5px;
        color:#FFF;
        background: rgba(17, 17, 17, 0.7);
        height: 45px;
        line-height: 45px;
        padding: 0 2px;
        width: auto;
        font-size: 14px;
    }
}
</style>
